<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>位置坐标</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <title>高德地图-位置坐标显示</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./elementui/index.css">
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>-->
    <style>
        .el-tag{
            width: 200px;
            margin-bottom: 10px;
        }
    </style>
</head>
    <body>
        <div id="app">
            <h2>高德地图-位置坐标显示</h2>
            <div>
                <!--请输入地域具体地址-->
                <el-input style="width: 300px;margin-bottom: 10px;" v-model="address" placeholder="请输入地域具体地址"></el-input>
                <!--请输入城市名称-->
                <el-input style="width: 300px;margin-bottom: 10px;" v-model="city" placeholder="请输入城市名称"></el-input>
                <!--添加仓库-->
                <el-button style="width: 300px;margin-bottom: 10px;" type="primary"  class="butT" @click="add()">添加仓库</el-button>

            </div>

            <div>
                <!--根据城市号进行查询城市信息-->
                <el-input style="width: 300px;margin-bottom: 10px;" v-model="cityCode" placeholder="请输入城市号"></el-input>
                <el-button style="width: 300px;margin-bottom: 10px;" type="primary"  class="butT" @click="findCity()">查询城市信息</el-button><br/>
                <!--div标签显示data里warehouses的数据-->
                <el-tag v-if="warehouses && warehouses.citycode" type="success">仓库编号:{{warehouses.citycode}}</el-tag><br/>
                <el-tag v-if="warehouses && warehouses.country" type="success">仓库所属:{{warehouses.country}}</el-tag><br/>
                <el-tag v-if="warehouses && warehouses.district" type="success">仓库地址:{{warehouses.district}}</el-tag><br/>
                <el-tag v-if="warehouses && warehouses.city" type="success">仓库城市:{{warehouses.city}}</el-tag><br/>
<!--                <el-tag type="success">仓库经纬度:{{warehouses.streetNumber}}</el-tag>-->
                <el-tag v-if="warehouses && warehouses.streetNumber" type="info">{{warehouses.streetNumber.location}}</el-tag><br/>
                <img :src="srcTo" alt="">
            </div>
            <div>
                <!--根据编号进行删除仓库信息-->
                <el-input style="width: 300px;margin-bottom: 10px;" v-model="warehouseId" placeholder="请输入仓库编号"></el-input>
                <el-button style="width: 300px;margin-bottom: 10px;" type="primary"  class="butT" @click="del()">根据仓库编号删除仓库</el-button>
            </div>

            <div>
                <!--显示所有仓库信息-->
                <el-button style="width: 300px;margin-bottom: 10px;" type="primary"  class="butT" @click="showWarehouse()">显示所有仓库信息</el-button>
                <el-table :data="list" border>
                    <el-table-column prop="addressComponent.citycode" label="仓库编号"></el-table-column>
                    <el-table-column prop="addressComponent.country" label="仓库所属"></el-table-column>
                    <el-table-column prop="addressComponent.district" label="仓库地址"></el-table-column>
                    <el-table-column prop="addressComponent.city" label="仓库城市"></el-table-column>
                    <el-table-column prop="addressComponent.streetNumber.location" label="仓库经纬度"></el-table-column>
                </el-table>
            </div>
        </div>
    </body>
</html>
<!-- 引入组件库 -->
<script src="./vue.js"></script>
<script src="./elementui/index.js"></script>
<script src="./axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            isDisabled:false,
            address:'',
            city:'',
            cityCode:'',
            srcTo:'',
            warehouseId:'',
            warehouses:{},
            list:[]
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {

        },
        methods: {
            //添加仓库
            add() {
                axios.get('/location/get',{
                    params:{
                        address:this.address,
                        city:this.city,
                    }
                }).then(response => {
                    if (response.data.flag) {
                        this.isDisabled = false
                        this.$message.success(response.data.message);
                    } else {
                        // this.isDisabled = true
                        this.$message.error(response.data.message);
                    }
                })
            },
            findCity() {
                axios.get('/location/getCounter',{
                    params:{
                        cityCode:this.cityCode,
                    }
                }).then(response => {
                    if (response.data.flag) {
                        this.$message.success(response.data.message);
                        this.warehouses = response.data.data.addressComponent;
                        console.log(this.warehouses);
                        if (response.data.data.addressComponent.streetNumber.location){
                            var location = response.data.data.addressComponent.streetNumber.location;
                            console.log(location);
                            // https://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=750*300&markers=mid,,A:116.481485,39.990464&key=<用户的key>
                            this.srcTo = 'https://restapi.amap.com/v3/staticmap?location='+location+
                                '&zoom=10&size=750*300&markers=mid,,A:'+location+'&key=881711fc2464aec7e13ec2b53ffced8f';
                            console.log(this.srcTo);
                        }

                        //打印信息
                        console.log(response.data.data.addressComponent);
                    } else {
                        this.isDisabled = true
                        this.$message.error(response.data.message);
                    }
                })
            },
            showWarehouse(){
                axios.get('/location/show').then(response => {
                    if (response.data.flag) {
                        this.$message.success(response.data.message);
                        this.list = response.data.data;
                        //打印信息
                        console.log(response.data.data);
                    } else {
                        this.isDisabled = true
                        this.$message.error(response.data.message);
                    }
                })
            },
            del(){
                axios.get('/location/del',{
                    params:{
                        warehouseId:this.warehouseId,
                    }
                }).then(response => {
                    if (response.data.flag) {
                        this.$message.success(response.data.message);
                        this.showWarehouse();
                    } else {
                        this.isDisabled = true
                        this.$message.error(response.data.message);
                    }
                })
            }
        }
    })
</script>
